// 人员分站 设备详情组件，包括 模板，emitter事件等
import Component from "../Component.js";
import ServiceUtils from "../../experience/other/shanxi/ServiceUtils.js";
export default class MstationDetail extends Component {
    constructor() {
        super();
    }

    template() {
        const mstationDetailPopup = `
            <div id="mstationDetail" class="deviceDetail" style="width: 500px;height: 200px;">
                <div class="detailheader">
                    <span class="title">监控测点信息</span>
                    <i id="mstationDetailClosePan" class="fas fa-times closeIcon"></i>
                </div>
                <div class="detailcontent">
                
                </div>   
            </div>
        `
        this.$$("#article").append(mstationDetailPopup);
    }

    async control() {
        this.ServiceUtils = new ServiceUtils()
        // 创建 overlay
        this.deviceDetailOverlay = this.drawer.addOverlay('mstationDetail','mstationDetailClosePan')
        this.deviceDetailOverlay.setOffset([10,10])
        // 相关 emit事件的初始化
        this.emitEventInit()
    }

    emitEventInit() {
        const mode = this.utils.getUrlParamer('edit')
        const flag = mode == 'true' ? true : false

        this.emitter.on('mstation-detail-open',async () => {
            if(flag) {
                return
            }
            const detailContent = this.$$('#mstationDetail .detailcontent')
            detailContent.empty()
            const targetArgument = this.emitter.params[0]
            const device_id = targetArgument.get('device_id')
            const coordinate = targetArgument.getGeometry().getCoordinates()
            this.deviceDetailOverlay.setPosition(coordinate)
            const {m_station_list} = await this.ServiceUtils.dataTreeFormat()
            const enableNode = m_station_list.find((s) => {
                return s.StationId == device_id
            })

            enableNode.staffCount = enableNode.children.length
            const createDateArr = enableNode.CreateTime.split('T')
            const detailInfoContent = `
                <div class="infoitem">
                     <div class="detailname">分站编号</div>
                     <div class="detailval">${enableNode.StationId}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">分站位置</div>
                     <div class="detailval">${enableNode.Pos}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">分站电量状态</div>
                     <div class="detailval">${enableNode.StationBatteryStatus}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">当前状态</div>
                     <div class="detailval">${enableNode.CurState}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">创建时间</div>
                     <div class="detailval">${createDateArr[0] + ' ' + createDateArr[1]}</div>              
                </div>
                <div class="infoitem">
                     <div class="detailname">当前分站人数</div>
                     <div class="detailval">${enableNode.staffCount}</div>              
                </div>
            `
            detailContent.append(detailInfoContent)
        })
    }


}